<template>
	<view class="page flex-column">
		<view class="safeVue" :style="{ height: statusBarHeight + 20 + 'rpx' }"></view>
		<view class="topVue flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="$tools.route('./address')">
			<image src="../../static/index/map.png" style="width: 48rpx; height: 48rpx;"></image>
			<view class="line-1 flex-1" style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx; padding-left: 10rpx;">点击{{ location }}实体店</view>
		</view>
		
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		
		<view class="text-center" 
			style="width: 100%; 
			height: 100rpx; 
			line-height: 100rpx; 
			color: #333; 
			font-size: 36rpx; font-weight: 600;"
			v-if="storeDetail.name"
			>
			{{storeDetail.name}}
		</view>
		
		<template v-if="JSON.stringify(storeDetail)!='{}'">
			<view class="banner margin0">
				<image :src="storeDetail.url" mode="aspectFill" style="width: 100%; border-radius: 16rpx;"></image>
			</view>
			<view class="menuVue flex-wrap flex-between margin30">
				<view class="menu flex-column align-center flex-center padding-column20" @click="navigote('./payMoney', storeDetail.url)">
					<!-- <text style="line-height: 1; color: #DFA0A4;">{{user.coupon}}</text> -->
					<view class="label">支付金额</view>
				</view>
				<view class="menu flex-column align-center flex-center padding-column20" @click="navigote('./chargeRecord')">
					<!-- <text style="line-height: 1; color: #DFA0A4;">{{user.coupon}}</text> -->
					<view class="label">金券明细</view>
				</view>
				<view class="menu flex-column align-center flex-center padding-column20" @click="navigote('./pocketNumber')">
					<!-- <text style="line-height: 1; color: #DFA0A4;">{{ user.point }}</text> -->
					<view class="label">红包数量</view>
				</view>
				<view class="menu flex-column align-center flex-center padding-column20" @click="navigote('./chargeRecord')">
					<!-- <text style="line-height: 1; color: #DFA0A4;">{{user.coupon}}</text> -->
					<view class="label">充值数量</view>
				</view>
			</view>
			
			<view class="tabVue margin10">
				<u-tabs 
					:list="tabs" 
					:is-scroll="true" 
					:current="tab" 
					@change="tabChange"
					name="classifyName"
					active-color="#D37430"
				></u-tabs>
			</view>
			
			
			<u-empty text="列表为空" mode="list" v-if="shopGoods.length===0" margin-top="50"></u-empty>
			
			<view class="productVue margin30 flex-between flex-wrap">
				<view class="product" v-for="(item, index) in shopGoods" :key="index" @click="selectFun(item)">
					<image :src="item.url" style="width: 330rpx; height: 330rpx; border-radius: 20rpx 20rpx 0 0;"></image>
					<view class="botVue flex-column flex-between">
						<view class="name line-1">{{ item.name }}</view>
						<view class="flex align-center">
							<text style="line-height: 1; color: #454545;">价格：</text>
							<text style="color: #DFA0A4; line-height: 1;">￥{{item.price}}</text>
						</view>
						<view class="flex align-center">
							<text style="line-height: 1; color: #454545;">库存：</text>
							<text style="color: #454545; line-height: 1;">{{ item.commodityStocks }}</text>
						</view>
						<view class="flex align-center">
							<text style="line-height: 1; color: #454545;">抵扣金券：</text>
							<text style="color: #454545; line-height: 1;">￥{{ item.coupon }}</text>
						</view>
						<view class="flex-end align-center">
							<view class="btn" @click.stop="numChange(0, item)">-</view>
							<view class="num">{{ item.shopCarCount }}</view>
							<view class="btn" @click.stop="numChange(1, item)">+</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		
		<image src="https://jg.zgxingongxiang.com/test/static/WeChat/2.jpg" class="fixed-auto" style="width: 100%;" mode="widthFix" v-else></image>
				
		<!-- 商品详情 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="popVue">
				<image :src="goodsDetail.url" style="width: 650rpx; height: 650rpx;"></image>
				<view class="botVue">
					<view class="name">{{ goodsDetail.name }}</view>
					<view class="flex align-center margin20">
						<text style="line-height: 1; color: #454545;">规格：</text>
						<text style="color: #454545; line-height: 1;">份</text>
					</view>
					<view class="flex-between margin20">
						<view class="flex align-center">
							<text style="line-height: 1; color: #454545;">价格：</text>
							<text style="color: #DFA0A4; line-height: 1;">￥{{ goodsDetail.price }}</text>
						</view>
						<view class="flex align-center">
							<text style="line-height: 1; color: #454545;">库存：</text>
							<text style="color: #454545; line-height: 1;">{{ goodsDetail.commodityStocks }}</text>
						</view>
					</view>
					<view class="flex align-center margin20">
						<text style="line-height: 1; color: #454545;">抵扣金券：</text>
						<text style="color: #454545; line-height: 1;">￥{{ goodsDetail.coupon }}</text>
					</view>
					<view class="flex-between align-center margin20">
						<text style="line-height: 1; color: #454545;">￥0</text>
						<view class="flex align-center">
							<view class="btn1" @click.stop="valChange(0, item)">-</view>
							<view class="num1">{{ goodsDetail.shopCarCount }}</view>
							<view class="btn1" @click.stop="valChange(1, item)">+</view>
						</view>
					</view>
					<view class="btn margin40" @click="toShopCar()">加入购物车</view>
				</view>
			</view>
		</u-popup>
	
		<!-- 邀请绑定 -->
		<u-popup v-model="isLogin && !user.referrerId" mode="center" border-radius="20">
			<view class="inviteVue relative">
				<image src="https://jg.zgxingongxiang.com/test/static/WeChat/1.png" mode="widthFix"></image>
				<view class="inner absolute-auto flex-column flex-between align-center">
					<view></view>
					<view class="flex-column align-center">
						<input type="text" placeholder="点击扫码二维码" v-model="inviteCode" disabled @click="scanFun()"/>
						<view class="confirm" @click="bandFun()">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-tabbar v-model="current" :list="list" active-color="#D37430" @change="tabbarChange"></u-tabbar>
	</view>
</template>

<script>
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
	import { mapState  } from "vuex"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				tab: 0,
				tabs:[],
				show: false,
				show20: false,
				quantity: 1,
				number: 1,
				storeDetail: {},
				shopGoods: [],
				goodsDetail: {},
				inviteCode: "",
				isSelected: false,
				categroyId: ""
			}
		},
		
		computed: {
			...mapState({
				list: state=> state.list,
				user: state=> state.user,
				isLogin: state=> state.isLogin,
				location: state=> state.location,
			}),
			current: {
				get(){
					return this.$store.state.current
				},
				set(val) {
					this.$store.state.current = val
				}
			}
		},
		
		onLoad() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});

			// setTimeout(()=>{
			// 	console.log(this.isLogin,!this.user.referrerId)
			// 	if(this.isLogin && !this.user.referrerId) this.show20 = true
			// },2000)
			
			uni.$on("storeDetail", (item)=>{
				console.log("选中实体店信息", item)
				this.storeDetail = item
				this.getGoodsCategory()
			})
			
			this.getLocation()
		},
		
		async onShow() {
			if(this.storeDetail.id) {
				this.tab = 0
				await this.getGoodsCategory()
			}
		},
		
		methods: {
			toShopCar(){
				console.log(this.goodsDetail.shopCarCount==0)
				if(this.goodsDetail.shopCarCount==0) return this.$u.toast('请增加商品数量') 
				this.show = false; 
				this.$tools.route('./shopCar', this.storeDetail.id)
			},
			navigote(url, value){
				if(!this.isLogin) return this.$tools.route("../login/login")
				if(!url) return this.$u.toast("暂未开放")
				this.$tools.route(url, value)
			},
			// 获取当前位置
			getLocation(){
				let that = this
				uni.getFuzzyLocation({
					type: 'wgs84',
					isHighAccuracy: true,
					success(res) {
						console.log('当前位置的经度：', res.longitude);
						console.log('当前位置的纬度：', res.latitude);
						let latitude = res.latitude.toString();
						let longitude = res.longitude.toString();
						let qqmapsdk = new QQMapWX({
							key: "PZ5BZ-WLKWB-5AVUV-N6AUH-YTRK7-CHF6A" ,// 申请的key
						})
						console.log(qqmapsdk)
						qqmapsdk.reverseGeocoder({
							location:{
							   latitude: latitude,
							   longitude: longitude,
							},
							success(response) {
								let location = response.result.address_component.city
								that.$store.dispatch("getLocation", location)
								// that.$store.dispatch("getDistrict", response.result.address_component.district)
								// that.$store.dispatch("getLocation", "武汉市武昌区")
								// that.$store.dispatch("getDistrict", "武昌区")
							},
							fail: function(error) {
								console.error(error,'error');
							}
						})
					
					},
					fail(e){
						console.log(e)
					}
				});
			},
			
			// 扫码绑定
			scanFun(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.inviteCode = res.result.split('=')[1]
						console.log("扫码获取的邀请码", that.inviteCode)
					}
				})
			},
			
			// 绑定
			async bandFun(){
				if(!this.inviteCode) return this.$u.toast("请扫码获取邀请码")
				const result = await this.$request("/api/WeChat/addInviteCode", {
					phoneNo: this.user.phoneNo,
					people: this.inviteCode
				}, "PUT")
				if(result.code===200) {
					this.$u.toast("绑定成功") 
					this.$store.dispatch("getUser")
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			async getGoodsCategory(){
				console.log("获取选中店铺ID", this.storeDetail.id)
				const result = await this.$request("/api/WeChat/shopGoodsCategory", {
					shopId: this.storeDetail.id
				}, "GET")
				if(result.code===200) {
					this.tabs = result.data
					this.categroyId = result.data[0].id
					console.log("获取选中商品分类ID", this.categroyId)
					this.getShopGoods()
					console.log("查询店铺商品分类", this.tabs)
				}
			},
			
			
			// 查询店铺商品
			async getShopGoods(){
				console.log(this.storeDetail.id, this.categroyId)
				const result = await this.$request("/api/WeChat/shopGoods", {
					shopId: this.storeDetail.id,
					classifyId: this.categroyId,
					userId: this.user.id
				}, "GET")
				if(result.code===200) {
					this.shopGoods = result.data
					console.log("查询店铺商品",this.storeDetail.id, this.categroyId, this.shopGoods)
				}
			},
			
			// 查看商品详情
			selectFun(item){
				this.show = true
				this.goodsDetail = item
			},
			
			tabChange(e){
				this.tab = e
				this.categroyId = this.tabs[e].id
				this.getShopGoods()
			},
			
			valChange(e){
				console.log(e)
				if(e===0 && this.goodsDetail.shopCarCount==0) return
				if(e===1 && this.goodsDetail.shopCarCount==this.goodsDetail.commodityStocks) return
				let count = e===0 ? this.goodsDetail.shopCarCount-1 : this.goodsDetail.shopCarCount+1
				this.$request("/api/WeChat/changeShopCar", {
					shopName: this.goodsDetail.name,
					goodsId: this.goodsDetail.id,
					count: count
				}, "GET").then(res=>{
					console.log(res)
					if(res.code===200) {
						e===0 ? this.goodsDetail.shopCarCount = this.goodsDetail.shopCarCount -1 : this.goodsDetail.shopCarCount = this.goodsDetail.shopCarCount + 1
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			
			numChange(e, item) {
				console.log(e)
				if(e===0 && item.shopCarCount==0) return
				if(e===1 && item.shopCarCount==item.commodityStocks) return
				let count = e===0 ? item.shopCarCount-1 : item.shopCarCount+1
				this.$request("/api/WeChat/changeShopCar", {
					shopName: item.name,
					goodsId: item.id,
					count: count
				}, "GET").then(res=>{
					console.log(res)
					if(res.code===200) {
						this.shopGoods.forEach(ver=>{
							if(ver.id===item.id) {
								item.shopCarCount = e===0 ? item.shopCarCount-1 : item.shopCarCount+1
								this.$forceUpdate()
							}
						})
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			
			tabbarChange(e){
				this.$store.dispatch("getCurrent", e)
				uni.switchTab({
					url: this.list[e].path
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.safeVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background: #fff;
	}
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 109;
	}
	.banner {
		width: 690rpx;
		height: 300rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
	}
	.menuVue {
		width: 690rpx;
		.menu {
			width: 330rpx;
			height: 120rpx;
			background: #ccc;
			border-radius: 20rpx;
			border: 6rpx solid #6387BF;
			// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			margin-bottom: 30rpx;
			.label {
				color: #454545;
				line-height: 1;
				font-weight: 600;
			}
		}
	}
	
	.tabVue {
		width: 100%;
	}
	
	.productVue {
		width: 100%;
		padding: 0 30rpx;
		.product {
			width: 330rpx;
			height: 600rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			margin-bottom: 30rpx;
			.botVue {
				width: 330rpx;
				height: 270rpx;
				padding: 20rpx;
				.name {
					color: #454545;
					font-weight: 600;
					line-height: 1;
				}
				.btn {
					width: 60rpx;
					height: 60rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 36rpx;
				}
				.num {
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
					margin: 0 15rpx;
					text-align: center;
					font-size: 30rpx;
				}
			}
		}
	}
	
	.popVue {
		width: 650rpx;
		.botVue {
			width: 100%;
			padding: 30rpx 30rpx 50rpx;
			.name {
				color: #454545;
				font-weight: 600;
				line-height: 1;
				font-size: 30rpx;
			}
			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				background: #E87520;
				border-radius: 18rpx;
			}
			.btn1 {
				width: 60rpx;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 36rpx;
			}
			.num1 {
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				margin: 0 15rpx;
				text-align: center;
				font-size: 30rpx;
			}
		}
	}

	
	.inviteVue {
		width: 650rpx;
		height: 1035rpx;
		overflow: hidden;
		.inner {
			width: 100%;
			height: 100%;
			padding: 60rpx 0 140rpx;
			input {
				width: 520rpx;
				height: 90rpx;
				background: #fff;
				box-sizing: border-box;
				display: block;
				color: #454545;
				border: 1rpx solid #bdbdbd;
				border-radius: 45rpx;
				text-align: center;
			}
			.confirm {
				width: 320rpx;
				height: 88rpx;
				background: #D37430;
				border-radius: 20rpx;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				margin-top: 50rpx;
			}
		}
	}
</style>
